ভিবিস্ক্রিপ্টে ইভেন্ট হ্যান্ডলিং হল ওয়েব পেজ বা ফর্ম উপাদানগুলির (যেমন বাটন, টেক্সট বক্স, চেকবক্স) সাথে ব্যবহারকারীর ইন্টারঅ্যাকশন অনুযায়ী প্রতিক্রিয়া (response) প্রদান করা। ইভেন্ট হ্যান্ডলিংয়ে click, change, mouseover, mouseout প্রভৃতি সাধারণ ইভেন্ট ব্যবহার করা হয়। এই ইভেন্টগুলো ব্যবহারকারী যখন একটি নির্দিষ্ট কার্যক্রম (যেমন ক্লিক করা বা মান পরিবর্তন) সম্পন্ন করেন, তখন তাদের সাথে সম্পর্কিত কোড বা ফাংশন কার্যকর হয়।
ইভেন্ট হ্যান্ডলিংয়ের মৌলিক ধারণা
ইভেন্ট হ্যান্ডলিংয়ের মাধ্যমে আপনি ব্যবহারকারীর ইনপুট বা অ্যাকশন অনুযায়ী বিভিন্ন ধরনের কার্যক্রম নিয়ন্ত্রণ করতে পারেন। এগুলোর মধ্যে click (ক্লিক), change (পরিবর্তন), mouseover (মাউস হোভার), mouseout (মাউস আউট) ইত্যাদি গুরুত্বপূর্ণ ইভেন্ট রয়েছে।
ভিবিস্ক্রিপ্টে ইভেন্ট হ্যান্ডলিং উদাহরণ
১. Click ইভেন্ট
এটি তখন কাজ করে যখন ব্যবহারকারী কোনো এলিমেন্টে (যেমন বাটন) ক্লিক করেন। Click ইভেন্টের মাধ্যমে আপনি কোড রান করতে পারেন।
উদাহরণ: বাটনে ক্লিক করার জন্য ইভেন্ট হ্যান্ডলিং
<!DOCTYPE html>
<html>
<head>
<script type="text/vbscript">
Sub OnClickEvent()
MsgBox "আপনি বাটনে ক্লিক করেছেন!"
End Sub
</script>
</head>
<body>
<button onclick="OnClickEvent()">ক্লিক করুন</button>
</body>
</html>
এখানে, ব্যবহারকারী যখন "ক্লিক করুন" বাটনে ক্লিক করবেন, তখন একটি বার্তা বক্স ("আপনি বাটনে ক্লিক করেছেন!") প্রদর্শিত হবে।
২. Change ইভেন্ট
Change ইভেন্ট ব্যবহার হয় যখন ফর্ম উপাদানের মান পরিবর্তন হয়। এটি সাধারণত টেক্সট বক্স, ড্রপডাউন, চেকবক্স ইত্যাদির ক্ষেত্রে ব্যবহৃত হয়।
উদাহরণ: টেক্সট বক্সের মান পরিবর্তনের জন্য ইভেন্ট হ্যান্ডলিং
<!DOCTYPE html>
<html>
<head>
<script type="text/vbscript">
Sub OnChangeEvent()
MsgBox "আপনি টেক্সট বক্সের মান পরিবর্তন করেছেন!"
End Sub
</script>
</head>
<body>
<input type="text" onchange="OnChangeEvent()" />
</body>
</html>
এখানে, ব্যবহারকারী যখন টেক্সট বক্সের মান পরিবর্তন করবেন, তখন একটি বার্তা বক্স দেখাবে।
৩. Mouseover এবং Mouseout ইভেন্ট
Mouseover ইভেন্ট তখন ঘটে যখন মাউস কার্সর একটি উপাদানের উপর আসে, এবং Mouseout ইভেন্ট ঘটে যখন মাউস কার্সর উপাদানটি থেকে সরে যায়।
উদাহরণ: Mouseover এবং Mouseout ইভেন্ট হ্যান্ডলিং
<!DOCTYPE html>
<html>
<head>
<script type="text/vbscript">
Sub OnMouseOver()
MsgBox "আপনি মাউস পয়েন্টার এখানে রেখেছেন!"
End Sub
Sub OnMouseOut()
MsgBox "আপনি মাউস পয়েন্টার এখান থেকে সরিয়ে নিয়েছেন!"
End Sub
</script>
</head>
<body>
<div onmouseover="OnMouseOver()" onmouseout="OnMouseOut()">এখানে মাউস রাখুন বা সরান</div>
</body>
</html>
এখানে, ব্যবহারকারী যখন মাউস কার্সর <div> উপাদানের উপর নিয়ে আসবেন, তখন "আপনি মাউস পয়েন্টার এখানে রেখেছেন!" বার্তা দেখাবে। এবং যখন মাউস কার্সর সরে যাবে, তখন "আপনি মাউস পয়েন্টার এখান থেকে সরিয়ে নিয়েছেন!" বার্তা দেখাবে।
আরও কিছু সাধারণ ইভেন্ট
- Focus: ফর্মের একটি ইনপুট এলিমেন্টে ফোকাস করার সময় (যেমন, টেক্সট বক্সে ক্লিক করা) এটি ঘটে।
- Blur: ইনপুট এলিমেন্ট থেকে ফোকাস সরানোর সময় এটি ঘটে।
- Submit: ফর্ম জমা দেওয়ার সময় এটি ঘটে।
- Keypress, Keydown, Keyup: কীবোর্ডের কী প্রেস, কী ডাউন বা কী আপ ইভেন্ট।
সারাংশ
ইভেন্ট হ্যান্ডলিং ভিবিস্ক্রিপ্টের একটি শক্তিশালী ফিচার, যা ওয়েব পৃষ্ঠায় ব্যবহারকারীর ইন্টারঅ্যাকশনের ভিত্তিতে কোড চালানোর সুবিধা প্রদান করে। click, change, mouseover, mouseout সহ অন্যান্য ইভেন্ট ব্যবহার করে আপনার পৃষ্ঠায় ইন্টারঅ্যাকটিভ ফিচার যোগ করা সম্ভব। এই ইভেন্টগুলির মাধ্যমে আপনি আপনার ওয়েব পেজের কার্যকারিতা এবং ব্যবহারকারীর অভিজ্ঞতা উন্নত করতে পারেন।
Read more
